// 引入Count的UI组件
import { 
  createIncrement, 
  createDecrement,
  createAsyncIncrement
} from "../../redux/actions/count"
// 引入connect用于连接UI组件与redux
import {connect} from "react-redux"

import React, { Component } from 'react'

// 定义UI组件
class CountUI extends Component {

  state = {carName: "捷途旅行者"}

  increment = () => {
    const {value} = this.selectNumber
    // 通知redux加Value
    this.props.jia(value*1)
    
  }

  decrement = () => {
    const {value} = this.selectNumber
    // 通知redux加Value
    this.props.jian(value*1)
  
  }

  incrementIfOdd = () => {
    const {value} = this.selectNumber
    if(this.props.count % 2 !== 0 ){
      this.props.jia(value*1)
    }
    
  }

  incrementAsync = () => {
    const {value} = this.selectNumber
    this.props.asyncJia(value*1, 500)
  }



  render() {
    console.log("count", this.props)
    return (
      <div>
        <h3>我是Count组件。。。。 </h3>
        <h4>当前求和为：{this.props.count}</h4>
        <h3>当前总人数为：{this.props.renshu}</h3>
        <select ref={c => this.selectNumber = c }name="" id="">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为基数就加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}


/* -------清晰版的写法，传统写法--------------

// 映射状态
const mapStateToProps = state =>({count: state})

// 映射状态的方法 完整写法
const mapDispatchToProps = dispatch => ({
    jia: data=> dispatch(createIncrement(data)),
    jian: data=> dispatch(createDecrement(data)),
    asyncJia: (data, time)=> dispatch(createAsyncIncrement(data, time))
})

export default connect(mapStateToProps, mapDispatchToProps)(CountUI)
 
*/

/* 简写版 */
export  default connect(
  state =>({count: state.he, renshu: state.rens.length}),

  // mapDispatchToProps的简写方式
  // react-redux 帮你把action分发出去
  {
    jia:createIncrement,
    jian:createDecrement,
    asyncJia:createAsyncIncrement,
  }
)(CountUI)




